<template>
  <a-form
    ref="antdForm"
    class="static-data-form"
    :label-col="{ span: 24 }"
    :wrapper-col="{ span: 24 }"
    @keyup.enter.prevent.stop="onOk"
  >
    <a-row :gutter="20" class="static-data-form-row">
      <a-col v-for="item of options" :key="item.field" :span="item.colSpan || 8">
        <a-form-item
          :ref="item.field"
          :name="item.field"
          :label="item.label"
          :label-col="item.labelCol"
          :wrapper-col="item.wrapperCol"
        >
          <a-textarea
            v-if="item.textarea === true"
            v-model:value="formData[item.field]"
            :rows="item.rows || 3"
            :placeholder="item.placeholder || `请输入${item.label}`"
          />
          <a-input
            v-else
            v-model:value="formData[item.field]"
            :placeholder="item.placeholder || `请输入${item.label}`"
          />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import { storeToRefs } from 'pinia';
import { useUserInfoStore } from '../../pinia/userInfo.js';
import { useStaticDataStore } from '../../pinia/staticData.js';
import { getStaticData } from '../../api/index.js';

export default {
  name: 'static-data-form',
  props: {
    options: {
      type: Array,
      default: () => [
        /*{field: "",label: "",value: "",placeholder: ""}*/
      ],
    },
  },
  data() {
    return {
      formData: {},
    };
  },
  created() {
    this.formData = this.getFinalFormData();
  },
  methods: {
    getOriginFormData() {
      return this.options.reduce((res, item) => {
        return Object.assign(res, { [item.field]: item.value });
      }, {});
    },
    getFinalFormData() {
      const getVal = (v) => (v === '0' ? '' : v);
      const formData = this.getOriginFormData();
      return Object.keys(formData).reduce((res, key) => {
        return Object.assign(res, {
          [key]: getVal(this.staticData[key]) || formData[key],
        });
      }, {});
    },
    cancel() {
      this.$emit('cancel');
    },
    reset() {
      this.formData = this.getOriginFormData();
    },
    async onOk() {
      const params = Object.assign({}, this.formData, {
        area_code: this.userInfoStore.area_code,
      });
      Object.keys(params).forEach((key) => {
        params[key] = params[key]
          .replace(/【/g, '[')
          .replace(/】/g, ']')
          .replace(/[“”‘’']/g, '"')
          .replace(/：/g, ':')
          .replace(/，/g, ',');
      });
      const res = await getStaticData(params).catch(() => ({}));
      // debugger;
      if (res.code === 200) {
        this.$message.success(res.msg);
        // console.log('参数值', params);
        this.staticDataStore.$patch((state) => {
          state.data = params;
        });
        this.cancel();
        return true;
      } else {
        this.$message.error(res.msg || '保存数据失败!');
        return false;
      }
    },
  },
  setup() {
    const userInfoStore = useUserInfoStore();
    const staticDataStore = useStaticDataStore();
    const { data } = storeToRefs(staticDataStore);
    return { staticData: data, staticDataStore, userInfoStore };
  },
};
</script>

<style lang="less"></style>
